<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8" name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no">
    <title>4-3对盒使用阴影</title>
    <link rel="stylesheet" href="../common.css">
    <script src="../jquery-2.2.0.js"></script>
    <script src="../main.js"></script>
    <style>
        .box{
            width:200px;
            height: 100px;
            margin-bottom: 20px;
            margin-left: 15px;
            padding:5px;
            background: #fa0;
            /*box-shadow的参数分别是x方向长度，y方向长度，模糊半径，扩展半径，颜色，内外(不写就是外)*/
            box-shadow: 10px 10px 10px 2px gray;
        }
        #none div{
            box-shadow: none;
        }
        #r0 div{
            box-shadow: 0 0 10px 2px gray ;
        }
        #blur0 div{
            box-shadow: 10px 8px 0 gray;
        }
        #negative div{
            margin-top: 16px;
            box-shadow: -10px -8px 5px gray;
        }
        #inset div{
            /*border:5px inset gray;*/
            box-shadow: -10px -8px 15px 10px #60431f inset;
        }
        #inside span{
            padding: 2px;
            background-color: #387ceb;
            box-shadow: 2px 2px 3px blue;
        }
        #first div:first-letter{
            box-shadow: 2px 2px 2px gray;
            background-color: yellow;
            font-size: 1.2rem;
            padding: 2px;
            margin:5px;
        }
        #tableShadow table{
            box-shadow: 5px 5px 5px gray;
            margin:15px;
            border-spacing: 10px;
        }
        #tableShadow td{
            box-shadow: 5px 5px 5px gray;
            background-color: #fa0;
            padding:15px;
            font-size: 1.2rem;
            font-weight: bold;
        }
    </style>
</head>
<body>
<h1>4-3对盒使用阴影</h1>
<h2 class="problem">box-shadow的参数分别是x方向长度，y方向长度，模糊半径，扩展半径，颜色，内外(不写就是外)</h2>
<h3>正常阴影</h3>
<code>box-shadow: 10px 10px 10px 2px gray;</code>
<section id="normal">
    <div class="box"></div>
</section>

<h3>无阴影</h3>
<code>box-shadow: none;</code>
<section id="none">
    <div class="box"></div>
</section>

<h3>距离为0</h3>
<code>box-shadow: 0 0 10px 2px gray ;</code>
<section id="r0">
    <div class="box"></div>
</section>

<h3>模糊为0</h3>
<code>box-shadow: 10px 8px 0 gray;</code>
<section id="blur0">
    <div class="box"></div>
</section>

<h3>负值阴影</h3>
<code>box-shadow: -10px -8px 5px gray;</code>
<section id="negative">
    <div class="box"></div>
</section>

<h3>盒内阴影</h3>
<code>box-shadow: -10px -8px 15px 10px #60431f inset;</code>
<section id="inset">
    <div class="box"></div>
</section>

<h3>对盒内元素使用</h3>
<code>    padding: 2px;
    background-color: #387ceb;
    box-shadow: 2px 2px 3px blue;</code>
<section id="inside">
    <div class="box"><br>
        <span>定义和用法</span><br>
        box-shadow 属性向框添加一个或多个阴影。
        提示：请使用 border-image-* 属性来构造漂亮的可伸缩按钮！
    </div>
</section>

<h3>给第一个字使用阴影（伪元素）</h3>
<code>    box-shadow: 2px 2px 2px gray;
    background-color: yellow;
    font-size: 1.2rem;
    padding: 2px;
    margin:5px;</code>
<section id="first">
    <div class="box">
        这是一段文字。
        提示：请使用 border-image-* 属性来构造漂亮的可伸缩按钮！
    </div>
</section>

<h3>表格及单元格使用阴影</h3>
<code>    tr{
        box-shadow: 5px 5px 5px gray;
        margin:15px;
        border-spacing: 10px;
    }
    td{
        box-shadow: 5px 5px 5px gray;
        background-color: #fa0;
        padding:15px;
        font-size: 1.2rem;
        font-weight: bold;
    }</code>
<section id="tableShadow">
    <table border="1">
        <tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td></tr>
        <tr><td>6</td><td>7</td><td>8</td><td>9</td><td>0</td></tr>
    </table>
</section>

</body>
</html>